<template>
  <div>
    <h2>分类</h2>
    <div class="wrapper" ref="aaa">
      <ul class="content">
        <button @click="btnClick">按钮</button>
       <li>分1</li>
       <li>分2</li>
       <li>分3</li>
       <li>分4</li>
       <li>分5</li>
       <li>分6</li>
       <li>分7</li>
       <li>分8</li>
       <li>分9</li>
       <li>分10</li>
       <li>分11</li>
       <li>分12</li>
       <li>分13</li>
       <li>分14</li>
       <li>分15</li>
       <li>分16</li>
       <li>分17</li>
       <li>分18</li>
       <li>分19</li>
       <li>分20</li>
       <li>分21</li>
       <li>分22</li>
       <li>分23</li>
       <li>分24</li>
       <li>分25</li>
       <li>分26</li>
       <li>分27</li>
       <li>分28</li>
       <li>分29</li>
       <li>分30</li>
       <li>分31</li>
       <li>分32</li>
       <li>分33</li>
       <li>分34</li>
       <li>分35</li>
       <li>分36</li>
       <li>分37</li>
       <li>分38</li>
       <li>分39</li>
       <li>分40</li>
       <li>分41</li>
       <li>分42</li>
       <li>分43</li>
       <li>分44</li>
       <li>分45</li>
       <li>分46</li>
       <li>分47</li>
       <li>分48</li>
       <li>分49</li>
       <li>分50</li>
       <li>分51</li>
       <li>分52</li>
       <li>分53</li>
       <li>分54</li>
       <li>分55</li>
       <li>分56</li>
       <li>分57</li>
       <li>分58</li>
       <li>分59</li>
       <li>分60</li>
       <li>分61</li>
       <li>分62</li>
       <li>分63</li>
       <li>分64</li>
       <li>分65</li>
       <li>分66</li>
       <li>分67</li>
       <li>分68</li>
       <li>分69</li>
       <li>分70</li>
       <li>分71</li>
       <li>分72</li>
       <li>分73</li>
       <li>分74</li>
       <li>分75</li>
       <li>分76</li>
       <li>分77</li>
       <li>分78</li>
       <li>分79</li>
       <li>分80</li>
       <li>分81</li>
       <li>分82</li>
       <li>分83</li>
       <li>分84</li>
       <li>分85</li>
       <li>分86</li>
       <li>分87</li>
       <li>分88</li>
       <li>分89</li>
       <li>分90</li>
       <li>分91</li>
       <li>分92</li>
       <li>分93</li>
       <li>分94</li>
       <li>分95</li>
       <li>分96</li>
       <li>分97</li>
       <li>分98</li>
       <li>分99</li>
       <li>分100</li>
      </ul>
    </div>

  </div>
</template>

<script>
// 第三方库引用规则，先封装，再使用
import BScroll from 'better-scroll'

export default {
  name: "Category",
  data () {
    return {
      scroll: null
    }
  },
  // 设置一个probeType用于设置监听
  props:{
    probeType:{
      type:Number,
      default:0
    },
    // 为true时启用上拉加载
    pullUpLoad: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    // 1.创建scroll对象
    this.scroll=new BScroll((this.$refs.aaa),{
      click:true,
      // 直接设置3进行监听影响性能
      // probeType:3,
      probeType:this.probeType,
      pullUpLoad:this.pullUpLoad
    })
    // 2.监听滚动
    this.scroll.on('scroll',(position) => {
      console.log(position);
    })

    this.scroll.on('pullingUp',() => {
      console.log('上拉加载更多')
    })
  },
  methods:{
    btnClick() {
      console.log('点击')
    }
  }
}
</script>

<style scoped>
  .wrapper {
    /* 原生实现滚动1.设置大盒子高度 */
    height: 150px;
    background-color: red;
    overflow: hidden;

    /* 2.允许在y轴滚动 ，超出盒子的自动隐藏*/
    /* overflow-y: scroll;  */
  }
</style>
